<template>
  <el-card class="card-view" shadow="always" :style="{ backgroundColor: randomColor(), color: config?.fontColor?.value }">
    <el-row type="flex" justify="space-around" style="padding:10px">
      <el-col :span="24">
        <div class="card-content">
          <div class="card-content-label">风险统计</div>
        </div>
      </el-col></el-row>
      <el-row>
    <el-col :span="12" v-for="(item,index) in grade" :key="index"
      style="display:flex;flex: 1; flex-wrap: wrap;justify-content: space-between; margin-top: 10px;"
      :style="{ color: config?.fontColor?.value }">
      <div style="padding-left:20px;flex: 1; min-width: 150px;max-width:150px;height: 40px; display: flex;">
        <el-col :span="6" class="lightgreen-box">
          <div class="underline">
            <div class="enroll-number">
              <h3>{{ item[0] || 0 }}</h3>
            </div>
          </div>
        </el-col>
        <el-col :span="18" class="orange-box">
          <div class="enroll-time">
            <div class="enroll-text">{{ item[1] }}
            </div>
          </div>
        </el-col>
      </div>
    </el-col>

      </el-row>
  </el-card>
</template>

<script>
import { request } from '@/api/service'

export default {
  sort: 5,
  title: '风险统计',
  name: 'grade',
  icon: 'el-icon-user-solid',
  description: '各等级的企业数量',
  height: 18,
  width: 20,
  isResizable: true,
  config: {
    color: {
      label: '背景颜色',
      type: 'color',
      value: '',
      placeholder: '颜色为空则随机变换颜色'
    },
    fontColor: {
      label: '字体颜色',
      type: 'color',
      value: '',
      placeholder: '请选择字体颜色'
    }
  },
  props: {
    config: {
      type: Object,
      required: false
    },
    industry: String,
  },
  data() {
    return {
      grade: {}
    }
  },
  mounted() {
    this.initGet()
  },
  methods: {
    initGet() {
      request({
        url: '/api/risk/apppoint',
        params: { "industry": this.industry }
      }).then((res) => {
        this.grade = res.data.grade
      })
    },
    // 生成一个随机整数
    randomColor() {
      const color = [
        '#fffff'
      ]
      const ran = Math.floor(Math.random() * 4)
      return color[ran]
    }
  }
}
</script>

<style scoped lang="scss">
.card-view {
  // border-radius: 10px;
  color: $color-primary;
}

.enroll-number {
  color: $color-primary;
}

h3 {
  margin: 0;
}

.lightgreen-box {
  border-bottom: 2px solid;
  height: 30px;
  margin-bottom: 10px;
}

.underline i {
  font-size: 30px;
}

.orange-box {
  height: 30px;
  color: black;
  border-bottom: 2px solid rgb(242, 242, 242);
}

.enroll-time {
  margin-left: 10px;
}

.enroll-text {
  color: rgb(138, 138, 138);
}

.el-card {
  height: 100%;
}</style>
